<template>
   <div class="userView bgf radius8">
        <el-row class="c3 fs16" style="margin-bottom: 20px;">
            <el-col>记录列表</el-col>
        </el-row>
        <el-table ref="multipleTableRef" :data="userlist" style="width: 100%;height: 90%;">
            <el-table-column type="selection" width="55"/>
            <el-table-column property="id" label="序号" width="100">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column property="username" label="用户名" width="500"/>
            <el-table-column property="role" label="角色" />
            <el-table-column property="operation" label="操作" width="200">
                <template #default="scope">
                    <el-link style="padding: 0 8px;" type="primary" :underline="false">上线</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 10px;" justify="end" align="middle">
            <el-pagination :total="userlist.length" :page-sizes="[8, 10, 15, 20]" layout="prev, pager, next, sizes"></el-pagination>
        </el-row>
    </div>
</template>

<script setup>
import { Plus, Delete } from '@element-plus/icons-vue';
import { ref,onBeforeMount } from 'vue'
import { ElTable } from 'element-plus'
import { getUserList } from '@/api';

onBeforeMount(() => {
    getUser();
})
const userlist = ref([])
const getUser = async () => {
    userlist.value = await getUserList();
}

const disabled = (row) => {
    console.log('row', row)
}
   
</script>

<style lang="scss" scoped>
.userView {
    margin: 0 10px;
    max-height: 92vh;
    padding: 16px 25px;
    box-sizing: border-box;

    .circles {
        width: 100px;
        position: relative;
        padding-left: 12px;
        color: #25A749;
        margin: auto;

        &:before {
            content: '';
            width: 8px;
            height: 8px;
            display: block;
            border-radius: 50%;
            left: 20%;
            top: 8px;
            margin: auto;
            position: absolute;
            background-color: #25A749;
        }
    }

    .enable {
        color: #FF4D4F;

        &:before {
            content: '';
            background-color: #FF4D4F;
        }
    }
}
</style>
<style lang="scss" scoped>
:deep(thead .cell) {
    border-right: 1px solid #e4e7ed;

}

:deep thead {
    th:last-child {
        .cell {
            border-right: none;
        }
    }
}

:deep(.el-table .el-table__cell) {
    text-align: center;
    --el-table-header-bg-color: #f6f6f6;
}
</style>
